<template>
  <view class="container">
    <view class="container_title">
      添加银行卡
    </view>

    <view class="container_box">
      <van-cell title="银行类型" :value="bankType" is-link :border="false" @click="bankShow =true" />
      <van-field label="银行卡号" :value="bankNumber" placeholder="请输入您的银行卡号" :border="false" input-align="right" @input="onmoneyInput" maxlength="19" />
    </view>

    <view class="container_btn">
      <button type="default" @click="addBankButton">添加</button>
    </view>

    <van-popup :show="bankShow" round position="bottom" custom-style="height: 50%" @close="bankShow = false">
      <van-picker show-toolbar :columns="columns" @confirm="confirm" @close="bankShow = false" />
    </van-popup>
  </view>
</template>

<script>
  import {
    getBankType,
    addBank
  } from "@/api/attestation.js"

  export default {
    data() {
      return {
        bankShow: false,
        bankType: '请选择银行卡类型',
        bankNumber: '',
        columns: [],
      };
    },
    onLoad() {
      getBankType().then(res => {
        // console.log(123)
        // console.log(res)
        res.data.forEach(item => {
          this.columns.push(item.dictValue)
        })
        // console.log(this.columns)
      })
    },
    methods: {
      onmoneyInput(e) {
        this.Cardmark = e.detail
      },
      confirm(e) {
        this.bankShow = false
        this.bankType = e.detail.value
      },
      addBankButton() {
        var body = {
          bankType: this.bankType,
          bankNumber: this.bankNumber
        }
        addBank(body).then(res => {
          // console.log(res)
          uni.navigateBack()
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 50rpx 30rpx 0;

    .container_title {
      color: rgba(0, 0, 0, 0.7);
      font-size: 36rpx;
      font-weight: bold;
    }

    .container_box {
      // height: 248rpx;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.04);
      border-radius: 20rpx;
      margin-top: 32rpx;
      overflow: hidden;

      /deep/ .van-cell {
        padding: 40rpx 30rpx !important;
      }

      /deep/ .van-cell__title {
        font-size: 34rpx !important;
      }

      /deep/ .van-cell__value {
        font-size: 30rpx;
      }
    }

    .container_btn {
      margin-top: 70rpx;

      // width: 690px;
      button {
        height: 97rpx;
        border-radius: 226rpx;
        font-size: 36rpx;
        line-height: 93rpx;
        background-color: rgba(253, 211, 56, 1);
        color: rgba(61, 61, 61, 1);
      }
    }
  }
</style>
